<template>
  <div class="app-container">
    <div class="search-container">
      <el-form :model="searchParam" :inline="true" label-width="70px">
        <el-form-item label="工序">
          <el-select
            v-model="searchParam.processId"
            placeholder="请选择工序"
            clearable
            filterable
            @change="processChange"
          >
            <el-option
              v-for="item in processList"
              :key="item.id"
              :label="item.processCode"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="生产线">
          <el-select
            v-model="searchParam.processEquipId"
            placeholder="请选择生产线"
            clearable
            filterable
            @change="processEquipChange"
          >
            <el-option
              v-for="item in processEquipList"
              :key="item.id"
              :label="item.equipCode"
              :value="item.id"
            />
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="search">
            <i-ep-search />
            搜索
          </el-button>
          <el-button @click="resetHandle">
            <i-ep-refresh />
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never" class="table-container">
      <el-table
        ref="dataTableRef"
        v-loading="loading"
        :data="tableData"
        highlight-current-row
        border
        :maxHeight="tableHeight"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          prop="name"
          label="姓名"
          fixed
          min-width="120"
          align="center"
        />

        <el-table-column
          v-for="col in columns"
          :key="col.prop"
          :prop="col.prop"
          :label="col.label"
          align="center"
          min-width="90"
        >
          <template #default="{ row }">
            <div>
              <div class="circle-container">
                <svg width="28" height="28" viewBox="0 0 200 200">
                  <!-- 四个象限 -->
                  <path
                    d="M100,100 L100,0 A100,100 0 0,1 200,100 Z"
                    :fill="
                      row[col.prop] >= 1
                        ? 'rgba(6, 82, 221,1.0)'
                        : 'rgba(27, 20, 100,0.08)'
                    "
                  />
                  <path
                    d="M100,100 L200,100 A100,100 0 0,1 100,200 Z"
                    :fill="
                      row[col.prop] >= 2
                        ? 'rgba(6, 82, 221,1.0)'
                        : 'rgba(27, 20, 100,0.08)'
                    "
                  />
                  <path
                    d="M100,100 L100,200 A100,100 0 0,1 0,100 Z"
                    :fill="
                      row[col.prop] >= 3
                        ? 'rgba(6, 82, 221,1.0)'
                        : 'rgba(27, 20, 100,0.08)'
                    "
                  />
                  <path
                    d="M100,100 L0,100 A100,100 0 0,1 100,0 Z"
                    :fill="
                      row[col.prop] >= 4
                        ? 'rgba(6, 82, 221,1.0)'
                        : 'rgba(27, 20, 100,0.08)'
                    "
                  />
                  <!-- 分割线 -->
                  <line
                    x1="100"
                    y1="0"
                    x2="100"
                    y2="200"
                    stroke="white"
                    stroke-width="6"
                  />
                  <line
                    x1="0"
                    y1="100"
                    x2="200"
                    y2="100"
                    stroke="white"
                    stroke-width="6"
                  />
                </svg>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        :background="true"
        :current-page="pageable.pageNum"
        :page-size="pageable.pageSize"
        :page-sizes="[10, 25, 50, 100]"
        :total="pageable.total"
        layout="total, sizes, prev, pager, next, jumper"
        class="mt-[20px]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import {
  useTable,
  useDownload,
  useDictionary,
  useComputeTableHeight,
} from "@/utils/useTable";
import request from "@/utils/request";
import {
  getMdmProcessEquipApi,
  getMdmprocessListApi,
  getMdmproductinfosApi1,
  getMdmProcessProjectApi,
} from "@/utils/commonData";
import dayjs from "dayjs";
import _ from "lodash-es";
import { authAllPerm } from "@/utils/index";

defineOptions({
  name: "DEMOCAPABILITYMATRIXTABLE",
  inheritAttrs: false,
});

// 列定义（工序/能力）
const columns = [
  { prop: "OP005", label: "OP005" },
  { prop: "OP010", label: "OP010" },
  { prop: "OP020", label: "OP020" },
  { prop: "OP030", label: "OP030" },
  { prop: "OP040", label: "OP040" },
  { prop: "OP050", label: "OP050" },
  { prop: "OP060", label: "OP060" },
  { prop: "OP070", label: "OP070" },
  { prop: "OP080", label: "OP080" },
  { prop: "OP100", label: "OP100" },
];

// 行数据（人员及其能力，1表示有能力，0或空表示无）
const matrixData = [
  {
    name: "张三",
    OP005: 1,
    OP010: 1,
    OP020: 4,
    OP030: 3,
    OP040: 0,
    OP050: 1,
    OP060: 2,
    OP070: 1,
    OP080: 0,
    OP100: 4,
  },
  {
    name: "李四",
    OP005: 0,
    OP010: 1,
    OP020: 1,
    OP030: 0,
    OP040: 1,
    OP050: 0,
    OP060: 1,
    OP070: 0,
    OP080: 1,
    OP100: 0,
  },
  {
    name: "王五",
    OP005: 1,
    OP010: 0,
    OP020: 1,
    OP030: 1,
    OP040: 1,
    OP050: 0,
    OP060: 0,
    OP070: 0,
    OP080: 0,
    OP100: 1,
  },
  {
    name: "赵六",
    OP005: 0,
    OP010: 0,
    OP020: 0,
    OP030: 1,
    OP040: 1,
    OP050: 1,
    OP060: 0,
    OP070: 0,
    OP080: 0,
    OP100: 0,
  },
  {
    name: "孙七",
    OP005: 0,
    OP010: 0,
    OP020: 0,
    OP030: 0,
    OP040: 0,
    OP050: 0,
    OP060: 1,
    OP070: 1,
    OP080: 0,
    OP100: 1,
  },
  {
    name: "李主管",
    OP005: 1,
    OP010: 0,
    OP020: 0,
    OP030: 0,
    OP040: 0,
    OP050: 0,
    OP060: 0,
    OP070: 0,
    OP080: 1,
    OP100: 0,
  },
  {
    name: "王主管",
    OP005: 0,
    OP010: 0,
    OP020: 0,
    OP030: 0,
    OP040: 0,
    OP050: 0,
    OP060: 0,
    OP070: 0,
    OP080: 0,
    OP100: 1,
  },
];

// 请求参数
const requestApi = "/mes/mesproducestorage/queryByPage";

// 是否需要分页
const pagination = true;

const initParam = {};

// 初始化搜索参数数据
const searchParamInit = {
  processId: "",
  processCode: "",
  processEquipId: "",
  projectId: "",
  projectCode: "",
  projectName: "",
};

const deleteParam = {
  api: "/eam/esmworkorder/delete",
  data: {},
};

// 数据请求错误后处理
function requestError() {}

// 定义tableHeight, 将计算注入dataCallBack回调中
const tableHeight = ref();
function dataCallBack(data: any) {
  setTimeout(() => {
    tableHeight.value = useComputeTableHeight();
  }, 100);
  //   console.log("dataCallBack", data);
  return matrixData;
}

// 表格操作 Hooks
const {
  tableData,
  pageable,
  searchParam,
  ids,
  getTableList,
  search,
  reset,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange,
  handleTableDelete,
  loading,
}: any = useTable(
  requestApi,
  initParam,
  searchParamInit,
  pagination,
  dataCallBack,
  requestError,
  deleteParam
);

onMounted(async () => {
  getTableList();
  await getProcessList();
  await getProcessEquipList();
});

// 获取工序列表
const processList = ref<any>([]);
async function getProcessList() {
  processList.value = (await getMdmprocessListApi({})) || [];
}
async function processChange(id: string) {
  searchParam.value.processEquipId = "";
  if (id) {
    const current: any =
      processList.value?.filter((e: any) => e.id === id)[0] ?? {};
    searchParam.value.processCode = current.processCode || "";
  } else {
    searchParam.value.processCode = "";
  }
  getProcessEquipList();
}

function resetHandle() {
  reset();
  getProcessList();
  getProcessEquipList();
}

// 获取工序列表
const processEquipList: any = ref([]);
async function getProcessEquipList() {
  searchParam.value.processEquipId = "";
  processEquipList.value = [];
  const { data } = await request({
    // url: `/mdm/mdmprocess/getList`,
    url: "/mdm/mdmprocessequip/getList",
    method: "post",
    data: {
      workshopSectionId: searchParam.value.workshopSectionId,
      processId: searchParam.value.processId,
    },
  });
  processEquipList.value = data;
}
function processEquipChange() {}
</script>

<style scoped lang="scss">
:deep(.el-table td.el-table__cell div) {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
